<template>
  <div class="container">
    <el-image class="bg" :src="getImgUrl()" fit="cover"></el-image>
    <div class="header">
      <div class="logo">
        <span>丰宁</span>
        <span>F</span>
        <span>N</span>
      </div>
      <div class="title">报工平台</div>
    </div>
    <div class="date">
      <div class="date-inside">
        {{ currentDate }}
        <div class="time">{{ currentTime }}</div>
      </div>
    </div>

    <div class="center">
      <div class="glass-effect">
        <div class="animated-item" :class="{ visibleI: isVisible }">
          <div class="item item-one" @click="reportTap">
            <div class="item-title">工序报工</div>
            <div class="item-value">
              <div
                class="item-value-inside"
                v-for="(item, index) in listOne"
                :key="item.id"
                :style="{
                  opacity: index == valueOneIndex ? 1 : 0,
                  transform: `scale(${valueOneIndex == index ? 1 : 0})`,
                }"
              >
                <div class="item-person">负责人: {{ item.executorName }}</div>
                <div class="item-process">
                  编号：<span>{{ item.codeNo }}</span
                  >（未报工）
                </div>
              </div>
            </div>
          </div>
          <div class="item item-two" @click="checkTap">
            <div class="item-title">工序首检</div>
            <div class="item-value">
              <div
                class="item-value-inside"
                v-for="(item, index) in listTwo"
                :key="item.id"
                :style="{
                  opacity: index == valueTwoIndex ? 1 : 0,
                  transform: `scale(${valueTwoIndex == index ? 1 : 0})`,
                }"
              >
                <div class="item-person">负责人: {{ item.executorName }}</div>
                <div class="item-process">
                  编号：<span>{{ item.codeNo }}</span
                  >（未首检）
                </div>
              </div>
            </div>
          </div>
        </div>
        <login-view
          class="animated-login"
          :class="{ visibleL: isVisible }"
          @back="backAction"
          @login="loginAction"
        />
      </div>
    </div>
    <div class="footer">欢迎使用报工平台,请选择车间登录汇报</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import LoginView from "./components/login.vue";
import { useRouter } from "vue-router";
import { loginApi, lisUnFirstApi, lisUnFinishApi } from "@/api/login";
import useUserStore from "@/store/modules/user";
import { useLoading } from "@/hooks/loading";

onMounted(() => {
  setInterval(updateTime, 1000);
  getList();
});

const currentDate = ref(new Date().toLocaleDateString());
const currentTime = ref(new Date().toLocaleTimeString());
const updateTime = () => {
  const now = new Date();
  currentDate.value = formatDate(now);
  currentTime.value = now.toLocaleTimeString();
};

const valueOneIndex = ref(0);
const valueTwoIndex = ref(0);
const listOne = ref([]);
const listTwo = ref([]);
const getList = async (id) => {
  const resOne = await lisUnFirstApi();
  const resTwo = await lisUnFinishApi();
  listOne.value = resOne.data;
  listTwo.value = resTwo.data;
};
setInterval(() => {
  valueOneIndex.value < listOne.value.length - 1
    ? (valueOneIndex.value += 1)
    : (valueOneIndex.value = 0);
  valueTwoIndex.value < listTwo.value.length - 1
    ? (valueTwoIndex.value += 1)
    : (valueTwoIndex.value = 0);
}, 5000);

const formatDate = (date) => {
  const options = {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  };
  const formattedDate = date.toLocaleDateString("zh-CN", options);
  return formattedDate.replace(/日(?!.*日)/, "日 ");
};

const router = useRouter();
const getImgUrl = () => {
  return new URL(`@/assets/images/login_background.jpg`, import.meta.url).href;
};

// 当前状态是否为登录状态
const isVisible = ref(false);

/** 汇报点击 */
const reportTap = () => {
  isVisible.value = true;
};

/** 检验点击 */
const checkTap = () => {
  isVisible.value = true;
};

/** 返回按钮点击 */
const backAction = () => {
  isVisible.value = false;
};

const { loading, close } = useLoading();

/** 登录按钮点击 */
const loginAction = async ({ account, password }) => {
  if (!account || account == "") {
    console.log(123);
    ElMessage.error("请输入账号");
    return;
  }

  if (!password || password == "") {
    ElMessage.error("请输入密码");
    return;
  }

  loading("加载中");
  try {
    const res = await loginApi({ account, password });
    useUserStore().saveUserInfo(res.data);
    window.localStorage.setItem("user", JSON.stringify(res.data));
    router.replace({ path: "/list" });
    close();
  } catch (err) {
    close();
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;
  overflow: hidden;
  .bg {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.header {
  z-index: 2;
  width: 100%;
  height: 140px;
  background-color: #3d6a9d;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 30%,
    70% 30%,
    65% 100%,
    10% 100%,
    8% 80%,
    0 80%
  );
  display: flex;
  align-items: center;
  .logo {
    margin-bottom: 30px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 30px;
  }
  .title {
    position: absolute;
    top: 35%;
    left: 45%;
    font-size: 42px;
    color: white;
  }
}

.date {
  z-index: 3;
  position: absolute;
  right: 30px;
  top: 65px;
  width: 28%;
  height: 64px;
  background-color: white;
  border-radius: 32px;
  border: 2px #666 solid;
  .date-inside {
    margin: 5px;
    height: 50px;
    border-radius: 25px;
    border: 2px #ccc solid;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    .time {
      position: absolute;
      right: -2px;
      top: -2px;
      height: 66px;
      width: 42%;
      background-color: #3d6a9d;
      border-radius: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      font-weight: bold;
    }
  }
}

.footer {
  z-index: 3;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  background-color: #3d6a9d;
  color: white;
  line-height: 50px;
  padding: 0 50px;
  font-size: 18px;
}

.center {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 140px;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .glass-effect {
    position: relative;
    width: 90%;
    height: 90%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px); /* Gaussian blur */
    -webkit-backdrop-filter: blur(10px); /* Gaussian blur for Safari */
    text-align: center;
    color: black;
    font-size: 1.5em;
    .item {
      margin-top: 100px;
      padding: 25px;
      border-radius: 10px;
      position: relative;
      width: 520px;
      height: 220px;
      .item-title {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .item-person {
        margin: 15px 0;
        font-size: 25px;
      }
      .item-process {
        font-size: 18px;
        span {
          font-size: 22px;
          color: #48a6ea;
        }
      }
      .item-value {
        margin-top: 10px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .item-value-inside {
          position: absolute;
          transition: all 1s, opacity 1s 0.2s;
        }
      }
    }
    .item-one {
      background-color: #a0fcfe;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .item-two {
      background-color: #fffe92;
    }
  }
}

.animated-login {
  position: absolute;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: translateY(100vh);
  opacity: 0;
}

.visibleL {
  transform: translateY(0);
  opacity: 1;
}

.animated-item {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.visibleI {
  opacity: 0;
}
</style>
